<script>
import { ElMessage } from 'element-plus';
import FloatingPoint from '/@/components/common/floatingPoint/FloatingPoint.vue';
import ProdSelect from '/@/components/common/prodSelect/ProdSelect.vue';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { arrHasData } from '/@/utils';
export default {
	name: 'DotList',
	components: {
		FloatingPoint,
		ProdSelect,
		PictureSelectorDialog,
	},
	props: {
		modelValue: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	emits: ['update:modelValue'],
	setup(props, { emit }) {
		const isShowPicSelector = ref(false);
		const editItem = computed({
			get() {
				return props.modelValue;
			},
			set() {
				updateModelValue();
			},
		});
		const updateModelValue = () => {
			emit('update:modelValue', editItem.value);
		};
		return {
			editItem,
			isShowPicSelector,
			valueFormat(row) {
				row.yaxis = 100 - row.topSlider;
			},
			delItem(index) {
				editItem.value.whiteDotList.splice(index, 1);
				updateModelValue();
				ElMessage.success('删除成功！');
			},
			addProd() {
				if (!arrHasData(editItem.value.whiteDotList)) editItem.value.whiteDotList = [];
				editItem.value.whiteDotList.push({
					xaxis: 50,
					yaxis: 50,
				});
				updateModelValue();
			},
			selectPic() {
				isShowPicSelector.value = true;
			},
			getPic(pic) {
				if (!arrHasData(pic)) return console.error('no data!');
				editItem.value.picUrl = pic[0].imgUrl;
			},
		};
	},
};
</script>
<template>
	<div class="DotList">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-button type="primary" style="margin-bottom: 20px" @click="selectPic">上传图片</el-button>
				<FloatingPoint v-if="editItem.picUrl" :background-image="editItem.picUrl" :dot-array="editItem.whiteDotList" />
				<el-empty v-else description="请上传图片"></el-empty>
			</el-col>
			<el-col :span="12">
				<el-button type="primary" style="margin-bottom: 20px" :disabled="!editItem.picUrl" @click="addProd">新增商品</el-button>
				<el-table :data="editItem.whiteDotList" style="width: 100%" max-height="340px">
					<el-table-column type="index" label="序号" width="50" />
					<el-table-column label="商品">
						<template #default="scope">
							<ProdSelect v-model="scope.row.productId" />
						</template>
					</el-table-column>
					<el-table-column label="操作" width="120">
						<template #default="scope">
							<el-popover placement="right" :width="400" trigger="click">
								<template #reference>
									<el-button type="text">编辑位置</el-button>
								</template>
								<div class="slider_wrap">
									<el-slider v-model="scope.row.xaxis" :show-tooltip="false"> </el-slider>
									<div class="vertical">
										<el-slider v-model="scope.row.topSlider" vertical :show-tooltip="false" :max="100" height="334px" @input="valueFormat(scope.row)">
										</el-slider>
									</div>
								</div>
							</el-popover>
							<el-popconfirm title="确定删除这条数据吗？" @confirm="delItem(scope.$index)">
								<template #reference>
									<el-button type="text">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<PictureSelectorDialog v-model="isShowPicSelector" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.DotList {
	padding: 20px;
}
</style>
<style lang="scss">
.slider_wrap {
	padding: 10px 20px;
	.el-slider {
		.el-slider__bar {
			display: none;
		}
	}
	.vertical {
		margin-left: -20px;
		margin-top: 5px;
	}
}
</style>
